uni

2023-11-26 16:47| 来源: 网络整理| 查看: 265

功能描述：点击导航栏跳转到搜索页，并在搜索页完成数据检索，数据渲染

1.监听index.vue的搜索框

//监听点击导航栏搜索框 onNavigationBarSearchInputClicked(){ //跳转搜索页面 uni.navigateTo({ url:'../search/search' }) },

2.新键搜索页面search.vue

搜索历史 {{item}}

我们在历史记录元素添加了click事件，这个事件触发历史记录函数完成历史搜索，下文展示。

3.配置pages.json

{ "path" : "pages/search/search", "style" : { //导航配置 "app-plus":{ "titleNView":{ //搜索框 "searchInput":{ "align":"center", "backgroundColor":"#f5f4f2", "borderRadius":"4px", "disabled":false, "placeholder":"搜索帖子" }, "buttons":[ { "color":"#333333", "colorPressed":"#fd597c", "float":"right", "fontSize":"14px", "text":"搜索" } ] } } } }

搜索相关

import demo from '@/newsdata.js'//导入新闻数据 import commonList from "@/components/common/common-list.vue" export default { components:{commonList}, data() { return { searchText:"", list:['测试历史','211321','程序员'] //搜索结果 searchList:[] } }, //监听导航输入 onNavigationBarSearchInputChanged(e){ // console.log(e) this.searchText=e.text }, //监听导航搜索按钮 onNavigationBarButtonTap(e){ //如果索引==0表示搜索按钮点击 if(e.index==0)this.searchEvent() }, methods: { //点击搜索历史 clickSearchHistory(text){ this.searchText = text//获取历史记录 this.searchEvent()//调用搜索事件 }, searchEvent(){ //收起键盘 uni.hideKeyboard() // //请求搜索 //loading uni.showLoading({ title: '加载中...', mask: false }); setTimeout(()=>{ this.searchList = demo //隐藏loading uni.hideLoading() },3000) console.log(this.searchList) } } }

【本文地址】

公司简介

联系我们